<template>
    <div class="SZJSFW_wraper">
        <div class="wrap">
            <div class="header">
                <span class="icon"></span>
                <span class="title">{{ $t('p3.tab3.title') }}</span>
            </div>

            <div class="content">
                <div class="desc">
                    {{ $t('p3.tab3.desc') }}
                </div>

                <div class="text" v-if="language === 'zh'">
                    <div class="box">
                        <div class="icon icon1"></div>
                        <div class="title">{{ $t('p3.tab3.item1.title') }}</div>
                        <div class="remark">{{ $t('p3.tab3.item1.remark') }}</div>
                        <div class="case">{{ $t('p3.tab3.item1.case') }}</div>
                        <router-link target="_blank" to="/case_detail?id=1697434214481272834">
                            <div class="link_item">{{ $t('p3.tab3.item1.link_item1') }}</div>
                        </router-link>
                    </div>
                    <div class="box">
                        <div class="icon icon3"></div>
                        <div class="title">{{ $t('p3.tab3.item2.title') }}</div>
                        <div class="remark">{{ $t('p3.tab3.item2.remark') }}</div>
                        <div class="case">{{ $t('p3.tab3.item2.case') }}</div>
                        <router-link target="_blank" to="/case_detail?id=1697434228926455810">
                            <div class="link_item">{{ $t('p3.tab3.item2.link_item1') }}</div>
                        </router-link>
                        <router-link target="_blank" to="/case_detail?id=1697434229735956482">
                            <div class="link_item">{{ $t('p3.tab3.item2.link_item2') }}</div>
                        </router-link>
                        <router-link target="_blank" to="/case_detail?id=1697434227349397506">
                            <div class="link_item">{{ $t('p3.tab3.item2.link_item3') }}</div>
                        </router-link>
                    </div>
                    <div class="box">
                        <div class="icon icon2"></div>
                        <div class="title">{{ $t('p3.tab3.item3.title') }}</div>
                        <div class="remark">{{ $t('p3.tab3.item3.remark') }}</div>
                        <div class="case">{{ $t('p3.tab3.item3.case') }}</div>
                        <router-link target="_blank" to="/case_detail?id=1697434228926455810">
                            <div class="link_item">{{ $t('p3.tab3.item3.link_item1') }}</div>
                        </router-link>
                        <router-link target="_blank" to="/case_detail?id=1700035132069572610">
                            <div class="link_item">{{ $t('p3.tab3.item3.link_item2') }}</div>
                        </router-link>
                    </div>
                    <div class="box">
                        <div class="icon icon4"></div>
                        <div class="title">{{ $t('p3.tab3.item4.title') }}</div>
                        <div class="remark">{{ $t('p3.tab3.item4.remark') }}</div>
                        <div class="case">{{ $t('p3.tab3.item4.case') }}</div>
                        <router-link target="_blank" to="/case_detail?id=1697434226514731010">
                            <div class="link_item">{{ $t('p3.tab3.item4.link_item1') }}</div>
                        </router-link>
                    </div>
                </div>

                <div class="text" v-else>
                    <div class="box">
                        <div class="icon icon1"></div>
                        <div class="title">{{ $t('p3.tab3.item1.title') }}</div>
                        <div class="remark">{{ $t('p3.tab3.item1.remark') }}</div>
                        <div class="case">{{ $t('p3.tab3.item1.case') }}</div>
                        <router-link target="_blank" to="/case_detail?id=1811297808777527298">
                            <div class="link_item">{{ $t('p3.tab3.item1.link_item1') }}</div>
                        </router-link>
                    </div>
                    <div class="box">
                        <div class="icon icon3"></div>
                        <div class="title">{{ $t('p3.tab3.item2.title') }}</div>
                        <div class="remark">{{ $t('p3.tab3.item2.remark') }}</div>
                        <div class="case">{{ $t('p3.tab3.item2.case') }}</div>
                        <router-link target="_blank" to="/case_detail?id=1811230399274205185">
                            <div class="link_item">{{ $t('p3.tab3.item2.link_item1') }}</div>
                        </router-link>
                        <router-link target="_blank" to="/case_detail?id=1811230689528430594">
                            <div class="link_item">{{ $t('p3.tab3.item2.link_item2') }}</div>
                        </router-link>
                        <router-link target="_blank" to="/case_detail?id=1811297096144306177">
                            <div class="link_item">{{ $t('p3.tab3.item2.link_item3') }}</div>
                        </router-link>
                    </div>
                    <div class="box">
                        <div class="icon icon2"></div>
                        <div class="title">{{ $t('p3.tab3.item3.title') }}</div>
                        <div class="remark">{{ $t('p3.tab3.item3.remark') }}</div>
                        <div class="case">{{ $t('p3.tab3.item3.case') }}</div>
                        <router-link target="_blank" to="/case_detail?id=1811230399274205185">
                            <div class="link_item">{{ $t('p3.tab3.item3.link_item1') }}</div>
                        </router-link>
                        <router-link target="_blank" to="/case_detail?id=1811296738126905346">
                            <div class="link_item">{{ $t('p3.tab3.item3.link_item2') }}</div>
                        </router-link>
                    </div>
                    <div class="box">
                        <div class="icon icon4"></div>
                        <div class="title">{{ $t('p3.tab3.item4.title') }}</div>
                        <div class="remark">{{ $t('p3.tab3.item4.remark') }}</div>
                        <div class="case">{{ $t('p3.tab3.item4.case') }}</div>
                        <router-link target="_blank" to="/case_detail?id=1811296909875265538">
                            <div class="link_item">{{ $t('p3.tab3.item4.link_item1') }}</div>
                        </router-link>
                    </div>
                </div>


            </div>
        </div>
    </div>
</template>
<script>
import p1 from '@/assets/images/wi/21.png'
import { getStore } from '@/libs'
export default {
    name: "index",
    components: {

    },
    data() {
        return {
            p1,
            params: null,
            language: 'zh'

        }
    },

    created() {
        this.language = getStore({name: 'language'});
        this.params = this.$route.query

    },
    methods: {

    }
};
</script>


<style lang="scss" scope>
.mt100{
    margin-top: 150px;
}
.SZJSFW_wraper{
    color: #333333;
    display: flex;
    justify-content: center;
    .wrap{
        width: 100%;
        padding: 0 20px;
        .header{
            display: flex;
            align-items: center;
            margin-top: 50px;
            span.icon{
                display: block;
                width: 5px;
                height: 35px;
                background-color: #98000A;
                border-right: 2px solid #FCA400;
            }
            span.title{
                font-size: 28px;
                font-weight: bold;
                margin-left: 10px;
            }
        }
        .content{
            display: flex;
            flex-direction: column;
            margin-top: 20px;
            flex-wrap: wrap;
            .desc{
                font-size: 22px;
                display: flex;
                flex: 5;
                padding: 20px 0;
            }

            .text{
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                .box{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-left: 10px;
                    margin-right: 10px;
                    padding: 20px;
                    background: #fff;
                    width: 40%;
                    margin-bottom: 20px;

                    .icon, .icon1, .icon2, .icon3, .icon4{
                        min-height: 40px;
                        width: 40px;
                        margin-bottom: 20px;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }
                    .icon1{
                        background: url('../../assets/images/wi/PP6.png');
                        background-size: 100% 100%;
                    }
                    .icon2{
                        background: url('../../assets/images/wi/PP02.png');
                        background-size: 100% 100%;
                    }
                    .icon3{
                        background: url('../../assets/images/wi/PP03.png');
                        background-size: 100% 100%;
                    }
                    .icon4{
                        background: url('../../assets/images/wi/PP01.png');
                        background-size: 100% 100%;
                    }
                    .title{
                        font-size: 24px;
                        font-weight: bold;
                    }
                    .remark{
                        display: flex;
                        padding: 10px 0;
                    }
                    .case{
                        color: #98000A;
                        margin-bottom: 5px;
                    }
                    .link_item{
                        cursor: pointer;
                        font-size: 22px;
                        color: #98000A;
                    }
                }
            }
        }

    }
}
</style>
